<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>gis_hcj</title>
        <link href="https://lib.baomitu.com/ol3/4.6.5/ol.css" rel="stylesheet" type="text/css" />
        <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js" type="text/javascript"></script>
        <style type="text/css">
            #mapCon
            {
                width: 100%;
                height: 95%;
                position: absolute;
            }
            .ol-zoomslider{
                top:7.5em
            }
        </style>
    </head>
    <body>
        <div id="mapCon">
        </div>
        <script type="text/javascript">
            var gaodeMapLayer = new ol.layer.Tile({
                title: "高德地图",
                source: new ol.source.XYZ({
                    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                    wrapX: false
                })
            });
    
            var map = new ol.Map({
                layers: [gaodeMapLayer],
                view: new ol.View({
                    center:  [114.30, 30.50],
                    projection: 'EPSG:4326',
                    zoom: 8,
                    minZoom:1
                }),
                target: 'mapCon'
            });
            const zoomToExtent = new ol.control.ZoomToExtent({
                extent:[110,30,160,30]
            })
            map.addControl(zoomToExtent)
            var zoomslider = new ol.control.ZoomSlider();
            map.addControl(zoomslider);
    
            let source = new ol.source.Vector()
            let layer = new ol.layer.Vector({
                source
            })
            map.addLayer(layer)
            // 给地图绑定点击事件
            map.on('click',(evt)=>{
                console.log(evt.coordinate)
                const point = new ol.Feature({
                    geometry:new ol.geom.Point(evt.coordinate)
                })
                source.addFeature(point)

                const view = map.getView()
                view.animate({
                    center:evt.coordinate
                })
                function review (){
                    mao.getView().animate({
                        center:'',
                        zoom:6,
                        duration: 3000
                    })
                }
            })
        </script>
    </body>
    </html>
    , initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>